import { View } from '@tarojs/components'
import './Skeleton.scss'

// 商品卡片骨架屏
export const ProductSkeleton = () => {
  return (
    <View className='product-skeleton'>
      <View className='skeleton-image' />
      <View className='skeleton-content'>
        <View className='skeleton-title' />
        <View className='skeleton-price' />
        <View className='skeleton-footer'>
          <View className='skeleton-text' />
          <View className='skeleton-rating' />
        </View>
      </View>
    </View>
  )
}

// 医院卡片骨架屏
export const HospitalSkeleton = () => {
  return (
    <View className='hospital-skeleton'>
      <View className='skeleton-header'>
        <View className='skeleton-logo' />
        <View className='skeleton-info'>
          <View className='skeleton-name' />
          <View className='skeleton-meta' />
        </View>
      </View>
      <View className='skeleton-content'>
        <View className='skeleton-text' />
        <View className='skeleton-text' />
      </View>
    </View>
  )
}

// 医生卡片骨架屏
export const DoctorSkeleton = () => {
  return (
    <View className='doctor-skeleton'>
      <View className='skeleton-header'>
        <View className='skeleton-avatar' />
        <View className='skeleton-info'>
          <View className='skeleton-name' />
          <View className='skeleton-specialties' />
        </View>
      </View>
      <View className='skeleton-content'>
        <View className='skeleton-text' />
        <View className='skeleton-text' />
      </View>
    </View>
  )
}

// 通用骨架屏
export const Skeleton = ({ 
  type = 'text', 
  width = '100%', 
  height = '20rpx', 
  className = '' 
}) => {
  return (
    <View 
      className={`skeleton skeleton-${type} ${className}`}
      style={{ width, height }}
    />
  )
}

export default Skeleton
